<template>
  <div class="app-container">
    <div class="flex cursor">
      <div class="custom-title margin-right-lg " :class="tag==1?'active':''" @click="bindChangeTag(1)">站级数据汇总</div>
      <!-- <div class="custom-title" :class="tag==2?'active':''" @click="bindChangeTag(2)">卡券使用情况</div> -->
    </div>

    <div v-if="tag==1">
      <div class="flex">
        <div class="label">内容：</div>
        <div class="custom-tag">
          <el-radio-group v-model="radioCon" size="large">
            <el-radio-button :label="item.label" :value="item.label" v-for="(item,index) in typeList" :key="index" @click="bindRadio(item.label,item.value)" />
          </el-radio-group>
        </div>
      </div>
      <el-form :model="queryParams" ref="queryRef" :inline="true">
        <div class="flex input-height">
          <div class="label" v-if="deptId==101">部门：</div>
          <div class="align-center" v-if="deptId==101">
            <el-tree-select v-model="queryParams.deptId" :data="deptOptions" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id"
              class="margin-right" placeholder="请选择收费站" check-strictly clearable @change="bindChangeTree($event,'deptId')" />
          </div>
          <div class="label">时间：</div>
          <div class="align-center">
            <el-date-picker style="margin-right:8px" v-model="dayDate" type="date" v-if="route.query.type==1" @change="bindChangeAllDate($event,'day')" />
            <el-date-picker style="margin-right:8px" v-model="monthDate" type="month" v-if="route.query.type==2" @change="bindChangeAllDate($event,'month')" />
            <el-date-picker style="margin-right:8px" v-model="yearDate" type="year" v-if="route.query.type==4||route.query.type==3"
              @change="bindChangeAllDate($event,'year')" />

            <el-select v-model="quarterDate" style="margin-right:8px" placeholder="请选择季度" clearable v-if="route.query.type==3">
              <el-option v-for="dict in quarterList" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
            <!-- <el-date-picker style="margin-right:8px" v-model="dateSection" type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
              v-if="route.query.type==3" @change="bindChangeAllDate" /> -->
          </div>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          <el-button type="primary" @click="handleExport">导出</el-button>
        </div>
      </el-form>

      <el-table :data="tableData" style="width: 100%" :header-cell-style="{background:'#E0EAFB!important'}" :row-class-name="tableRowClassName"
        v-if="!radioCon.includes('鲜活')" border show-overflow-tooltip>

        <el-table-column prop="deptName" label="收费站" width="180" />
        <el-table-column prop="date" label="时间" />
        <el-table-column prop="a" label="A" width="180" />
        <el-table-column prop="b" label="B" width="180" />
        <el-table-column prop="c" label="C" />
        <el-table-column prop="d" label="D" />
        <el-table-column prop="e" label="E" v-if="radioCon.includes('货')||radioCon.includes('ETC货')||radioCon.includes('非')" />
        <el-table-column prop="f" label="F" v-if="radioCon.includes('货')||radioCon.includes('ETC货')||radioCon.includes('非')" />
        <el-table-column prop="h" label="H" v-if="!radioCon.includes('非')" />
        <el-table-column prop="total" label="合计" />
      </el-table>
      <el-table :data="tableData" style="width: 100%" :header-cell-style="{background:'#E0EAFB!important','text-align': 'center '}"
        :row-class-name="tableRowClassName" v-if="radioCon.includes('鲜活')" border>
        <el-table-column prop="deptName" label="收费站" width="180" />
        <el-table-column prop="date" label="时间" />
        <el-table-column label="A">
          <el-table-column prop="aFee" label="减免通行费" />
          <el-table-column prop="a" label="出口通行量" />
        </el-table-column>
        <el-table-column prop="b" label="B">
          <el-table-column prop="bFee" label="减免通行费" />
          <el-table-column prop="b" label="出口通行量" />
        </el-table-column>
        <el-table-column prop="c" label="C">
          <el-table-column prop="cFee" label="减免通行费" />
          <el-table-column prop="c" label="出口通行量" />
        </el-table-column>
        <el-table-column prop="d" label="D">
          <el-table-column prop="dFee" label="减免通行费" />
          <el-table-column prop="d" label="出口通行量" />
        </el-table-column>
        <el-table-column prop="e" label="E">
          <el-table-column prop="eFee" label="减免通行费" />
          <el-table-column prop="e" label="出口通行量" />
        </el-table-column>
        <el-table-column prop="f" label="F">
          <el-table-column prop="fFee" label="减免通行费" />
          <el-table-column prop="f" label="出口通行量" />
        </el-table-column>
        <el-table-column prop="f" label="合计">
          <el-table-column prop="totalFee" label="减免通行费" />
          <el-table-column prop="total" label="出口通行量" />
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getTppeAll" />

    </div>

    <!-- <div v-if="tag==2">
      <div class="flex">
        <div class="label">内容：</div>
        <div class="custom-tag">
          <el-radio-group v-model="radioCarCon" size="large">
            <el-radio-button :label="item.label" :value="item.label" v-for="(item,index) in carTypeList" :key="index"
              @click="bindCarRadio(item.label,item.value,index)" />
          </el-radio-group>
        </div>
      </div>
      <el-form :model="queryParamsCor" ref="queryRef" :inline="true">
        <div class="flex input-height">
           <div class="label">位置：</div>
          <div class="align-center">
            <el-tree-select v-model="queryParamsCor.deptId" :data="deptOptions" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id"
              class="margin-right" placeholder="请选择收费站" check-strictly clearable @change="bindChangeTree($event,'deptId')" />
          </div> 
          <div class="label">时间：</div>
          <div class="align-center">
            <el-date-picker style="margin-right:8px" v-model="dayDate" type="date" v-if="route.query.type==1" @change="bindChangeAllDate($event,'day')" />
            <el-date-picker style="margin-right:8px" v-model="monthDate" type="month" v-if="route.query.type==2" @change="bindChangeAllDate($event,'month')" />
            <el-date-picker style="margin-right:8px" v-model="yearDate" type="year" v-if="route.query.type==4" @change="bindChangeAllDate($event,'year')" />
            <el-date-picker style="margin-right:8px" v-model="dateSection" type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
              v-if="route.query.type==3" @change="bindChangeAllDate" />
          </div>
          <el-button type="primary" icon="Search" @click="handleQueryCor">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </div>
      </el-form>
      <el-table :data="tableDataCar" style="width: 100%" :header-cell-style="{ 'text-align': 'center '}">
        <el-table-column type="index" label="序号" width="50"></el-table-column>
        <template v-for="(item,index) in goOutContent">
          <el-table-column :label="item.title" v-if="item.children" align="center">
            <template v-for="(element) in item.children">
              <el-table-column :label="element.title" :prop="element.prop" />
            </template>
          </el-table-column>
          <el-table-column :prop="item.prop" :label="item.title" align="center" v-else />
        </template>
      </el-table>

      <pagination v-show="totalCar>0" :total="totalCar" v-model:page="queryParamsCor.pageNum" v-model:limit="queryParamsCor.pageSize" @pagination="getList" />
    </div> -->

  </div>
</template>

<script setup name="summary">
import moment from 'moment'
import { stationEnTrafficList, stationExTrafficList, stationFeeList, stationAgricultural, getReportSituation } from "@/api/charge/ticket";
import { selectTbTicketClearList, selectTbTicketLoseCpcList, selectTbTicketMicrocomputerList, selectTbTicketPaperList, selectTbTicketRecycleList, selectTbTicketSurplusList, selectTbTicketMediumList } from "@/api/charge/ticket";
import { deptTreeSelect } from "@/api/system/user";
import useUserStore from '@/store/modules/user'
import config from "../enroll/config"
import { ref } from 'vue';

const { proxy } = getCurrentInstance()
const userStore = useUserStore()
const tableData = ref()
const radioCon = ref('现客入')
const typeList = ref([{ label: '现客入', value: "收费站现金客车日报表" },
{ label: '现客出', value: "收费站现金客车日报表" },
{ label: '现客费', value: "收费站现金客车日报表" },
{ label: '现货入', value: "收费站现金货车日报表" },
{ label: '现货出', value: "收费站现金货车日报表" },
{ label: '现货费', value: "收费站现金货车日报表" },
{ label: 'ETC客入', value: "收费站ETC客车日报表" },
{ label: 'ETC客出', value: "收费站ETC客车日报表" },
{ label: 'ETC客费', value: "收费站ETC客车日报表" },
{ label: 'ETC货入', value: "收费站ETC货车日报表" },
{ label: 'ETC货出', value: "收费站ETC货车日报表" },
{ label: 'ETC货费', value: "收费站ETC货车日报表" },
{ label: '非客量', value: "收费站非现金客车日报表" },
{ label: '非客费', value: "收费站非现金客车日报表" },
{ label: '非货量', value: "收费站非现金货车日报表" },
{ label: '非货费', value: "收费站非现金货车日报表" },
{ label: '鲜活', value: "运输鲜活农产品车辆日报表" }])

const queryParams = ref({ "ticketName": "收费站现金客车日报表", "startDate": "2024-08-27", "endDate": "2024-08-28", pageNum: 1, pageSize: 10, }) //loadId 路段  ,"deptId":部门
const quarterList = ref([{ label: "第一季度  01.01-03.31", value: 0 }, { label: "第二季度  04.01-06.30", value: 1 }, { label: "第三季度  07.01-09.30", value: 2 }, { label: "第四季度  10.01-12.31", value: 3 }])
const deptOptions = ref([])
const cycleRadio = ref('day')
const selectName = ref('现客入')
const queryParamsReport = ref({ reportDate: "" })
const dateSection = ref([])
const total = ref(0)
const tag = ref(1)
const deptId = ref()


const tableDataCar = ref([])
const queryParamsCor = ref({ date: "", pageNum: 0, pageSize: 10 })
const queryCarParams = ref({ "ticketName": "收费站现金客车日报表", "startDate": "2024-08-27", "endDate": "2024-08-28" })
const radioCarCon = ref('现金通行介质使用情况日清表')
const radioCarIndex = ref(0)
const carTypeList = ref([
  { label: '现金通行介质使用情况日清表', value: "现金通行介质使用情况日清表", interface: 'selectTbTicketMediumList' },
  { label: '出口回收非正常CPC卡明细表', value: "出口回收非正常CPC卡明细表", interface: 'selectTbTicketRecycleList' },
  { label: '无CPC卡车辆统计表', value: "无CPC卡车辆统计表", interface: 'selectTbTicketLoseCpcList' },
  { label: 'CPC卡盈余卡回收登记表', value: "CPC卡盈余卡回收登记表", interface: 'selectTbTicketSurplusList' },
  { label: '非正常CPC卡清卡登记表', value: "非正常CPC卡清卡登记表", interface: 'selectTbTicketClearList' },
  { label: '纸质通行券使用情况明细表', value: "纸质通行券使用情况明细表", interface: 'selectTbTicketPaperList' },
  { label: '微机票使用情况登记表', value: "微机票使用情况登记表", interface: 'selectTbTicketMicrocomputerList' },
])
const methods = ref({ selectTbTicketClearList, selectTbTicketLoseCpcList, selectTbTicketMicrocomputerList, selectTbTicketPaperList, selectTbTicketRecycleList, selectTbTicketSurplusList, selectTbTicketMediumList })
const goOutContent = ref([])
const totalCar = ref(0)
const route = useRoute();
const dayDate = ref()
const monthDate = ref()
const yearDate = ref()
const quarterDate = ref()
const selectInterface = ref()




const tableRowClassName = ({
  row,
  column,
  rowIndex,
  columnIndex,
}) => {
  if (columnIndex === 0) {
    return 'info-row'
  } else if (tableData.value[rowIndex].deptName.includes('小计')) {
    return 'success-row'
  }
  return ''
}

const bindChangeTag = (val) => {
  tag.value = val;
  if (val == 2) {
    goOutContent.value = config.goOutContent1;
    queryParamsCor.value = { date: moment().format("YYYY-MM-DD"), deptId: deptId.value, pageNum: 1, pageSize: 10, }
    getList('selectTbTicketMediumList')
  } else {
    queryParams.value = { "ticketName": "收费站现金客车日报表", "startDate": moment().format("YYYY-MM-DD"), "endDate": moment().format("YYYY-MM-DD"), pageNum: 1, pageSize: 10, deptId: deptId.value }
  }
}
/** 查询部门下拉树结构 */
function getDeptTree() {
  deptTreeSelect().then(response => {
    deptOptions.value = response.data;
  });
};
const getEnterList = () => {
  stationEnTrafficList(queryParams.value).then(res => {
    if (res.code == 200 && res.rows && res.rows.length) {
      tableData.value = res.rows;
      total.value = res.total;

    } else {
      tableData.value = []
    }
  });
}

const getGoList = () => {
  stationExTrafficList(queryParams.value).then(res => {
    if (res.code == 200 && res.rows && res.rows.length) {
      tableData.value = res.rows;
      total.value = res.total;
    } else {
      tableData.value = []
    }
  });
}

const getCostList = () => {
  stationFeeList(queryParams.value).then(res => {
    if (res.code == 200 && res.rows && res.rows.length) {
      tableData.value = res.rows;
      total.value = res.total;
    } else {
      tableData.value = []
    }

  });
}
const getAgricultural = () => {
  stationAgricultural(queryParams.value).then(res => {
    if (res.code == 200 && res.rows && res.rows.length) {
      tableData.value = res.rows;
      total.value = res.total;
    } else {
      tableData.value = []
    }

  });
}
const bindChangeTree = (val, name) => {
  queryParams.value[name] = val;
  queryParamsCor.value[name] = val;
  getTppeAll()
}
const bindRadio = (name, val) => {
  queryParams.value.ticketName = val;
  selectName.value = name;
  getTppeAll()
}

const bindchangeDate = (val) => {
  let date = new Date();
  let year = date.getFullYear();
  let params = {}
  if (val == '1') {
    params.startDate = moment().subtract(1, 'day').format("YYYY-MM-DD")
    params.endDate = moment().subtract(1, 'day').format("YYYY-MM-DD");
    dayDate.value = params.startDate;
  } else if (val == '2') {
    params.startDate = moment().startOf('month').format('YYYY-MM-DD');
    params.endDate = moment().endOf('month').format('YYYY-MM-DD')
    monthDate.value = moment().startOf('month').format('YYYY-MM');
  } else if (val == '3') {
    let quarterAll = [year + '-01-01', year + '-04-01', year + '-07-01', year + '-10-01']
    let startQuarter = moment(moment().quarter(moment().quarter()).startOf('quarter').valueOf()).format('YYYY-MM-DD');
    let endQuarter = moment(moment().quarter(moment().quarter()).endOf('quarter').valueOf()).format('YYYY-MM-DD');
    params.startDate = startQuarter
    params.endDate = endQuarter
    quarterDate.value = quarterAll.indexOf(startQuarter)
    yearDate.value = moment().format("YYYY")
  } else {
    params.startDate = year + '-01-01'
    params.endDate = year + '-12-31'
    yearDate.value = moment().format("YYYY")
  }
  dateSection.value = [moment(params.startDate).format("YYYY-MM-DD"), moment(params.endDate).format("YYYY-MM-DD")]
  if (tag.value == 1) { queryParams.value = { ...queryParams.value, ...params }; getTppeAll() } else { queryParamsCor.value = { ...queryParamsCor.value, ...params }; getList() }


}


const getTppeAll = () => {
  if (selectName.value.includes("入")) {
    getEnterList()
  } else if (selectName.value.includes("出") || selectName.value.includes("量")) {
    getGoList()
  } else if (selectName.value.includes("费")) {
    getCostList()
  } else {
    getAgricultural()
  }
}

const bindChangeAllDate = (val, name) => {
  let params = {}
  if (name == 'day') {
    dayDate.value = val;
    params.startDate = moment(val).format("YYYY-MM-DD")
    params.endDate = moment(val).format("YYYY-MM-DD");
  } else if (name == 'month') {
    monthDate.value = val
    params.startDate = moment(val).startOf('month').format('YYYY-MM-DD');
    params.endDate = moment(val).endOf('month').format('YYYY-MM-DD')
  } else if (name == 'year') {
    yearDate.value = val
    if (route.query.type == 4) {
      params.startDate = moment(val).startOf('year').format('YYYY') + '-01-01'
      params.endDate = moment(val).startOf('year').format('YYYY') + '-12-31'
    }


  } else {
    dateSection.value = [moment(val[0]).format("YYYY-MM-DD"), moment(val[1]).format("YYYY-MM-DD")]
  }

  if (tag.value == 1) { queryParams.value = { ...queryParams.value, ...params }; } else { queryParamsCor.value = { ...queryParamsCor.value, ...params }; }

}


/** 搜索按钮操作 */
function handleQuery() {
  if (route.query.type == 3) {
   
    let date = new Date();
    let year = yearDate.value ? moment(yearDate.value).format("YYYY") : date.getFullYear();
    if (quarterDate.value == 0) {
      queryParams.value.startDate = year + '-01-01'
      queryParams.value.endDate = year + '-03-31'
    } else if (quarterDate.value == 1) {
      queryParams.value.startDate = year + '-04-01'
      queryParams.value.endDate = year + '-06-30'
    } else if (quarterDate.value == 2) {
      queryParams.value.startDate = year + '-07-01'
      queryParams.value.endDate = year + '-09-30'
    } else if (quarterDate.value == 3) {
      queryParams.value.startDate = year + '-10-01'
      queryParams.value.endDate = year + '-12-31'
    }
  }

  getTppeAll()
};
/** 搜索按钮操作 */
function handleQueryCor() {
  getList(selectInterface.value)
};
/** 重置按钮操作 */
function resetQuery() {
  queryParams.value = { ticketName: selectName.value };
  // queryParamsCor.value = { ticketName: selectName.value };
  cycleRadio.value = "day"
  proxy.resetForm("queryRef");
  start()
  // proxy.$refs.deptTreeRef.setCurrentKey(null);
  handleQuery();
};

const start = () => {
  let startDate = moment().subtract(1, 'day').format("YYYY-MM-DD")
  if (route.query.type) {
    bindchangeDate(route.query.type)
  } else {
    queryParams.value.startDate = startDate;
    queryParams.value.endDate = startDate
    queryParamsCor.value.startDate = startDate;
    queryParamsCor.value.endDate = startDate
    queryParamsReport.value.reportDate = startDate;
    dayDate.value = startDate;
  }

}


/** 查询列表 */
function getList(abutment, date) {
  if (!abutment) {
    abutment = carTypeList.value[radioCarIndex.value].interface
  }
  if (date) {
    queryParamsCor.value.date = date
  }
  methods.value[abutment](tag.value == 1 ? queryParams.value : queryParamsCor.value).then(res => {
    if (res.code == 200 && res.rows && res.rows.length > 0) {
      tableDataCar.value = res.rows;
      totalCar.value = res.total;
    } else {
      tableDataCar.value = []
    }

  });
};


const getDeptId = () => {
  userStore.getInfo().then(res => {
    if (res.code == 200) {
      // deptName.value = res.user.dept.deptName;
      deptId.value = res.user.dept.deptId;
      queryParams.value.deptId = res.user.dept.deptId;
      queryParamsCor.value.deptId = res.user.dept.deptId;
      start()
    }

  })
}

function handleExport() {
  proxy.download(`statistics/generateExcelForm?deptId=${deptId.value}`, {
    ...queryParams.value
  }, `忻州公司报表${new Date().getTime()}.xlsx`);
}


getDeptTree()
getDeptId()


</script>

<style scoped>
.flex {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.flex .label {
  color: #333;
  font-size: 14px;
}
/deep/.padding .el-radio-button--large .el-radio-button__inner {
  padding: 8px 19px;
}
/deep/ .custom-tag .el-radio-button--large .el-radio-button__inner {
  min-width: 60px;
  height: 32px;
  line-height: 32px;
  margin: 0 4px 0;
  padding: 0 10px;
  border: 1px solid #e4e4e4;
  font-size: 14px;
}
/deep/ .custom-tag .el-radio-button--large.is-active .el-radio-button__inner {
  background: #fff;
  border: 1px solid #246bcc;
  color: #246bcc;
  position: relative;
}

/deep/
  .custom-tag
  .el-radio-button--large.is-active
  .el-radio-button__inner:after {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  border-top: 20px solid #246bcc;
  border-left: 20px solid transparent;
}
/deep/
  .custom-tag
  .el-radio-button--large.is-active
  .el-radio-button__inner:before {
  content: "";
  position: absolute;
  width: 5px;
  height: 6px;
  background: transparent;
  top: 2px;
  right: 4px;
  border: 1px solid white;
  border-top: none;
  border-right: none;
  transform: rotate(-55deg);
  z-index: 9;
}

.margin-right {
  margin-right: 8px;
}

/deep/ .input-height .el-input__wrapper {
  height: 32px;
}
/deep/ .input-height .el-date-editor.el-input {
  height: 32px;
}
.margin-right-lg {
  margin-right: 32px;
}
.cursor {
  cursor: pointer;
}
.flex-end {
  margin-left: auto;
}
.active {
  position: relative;
}
.active::before {
  content: "";
  display: block;
  width: 50px;
  height: 2px;
  border-radius: 2px;
  background: var(--el-color-primary);
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
}

/deep/ .el-table .warning-row {
  background: #e0eafb !important;
  text-align: center;
}
/deep/ .el-table .success-row {
  background: #ffeed9 !important;
  text-align: center;
}
/deep/ .el-table .info-row {
  background: #eaeaea !important;
  text-align: center;
}

.text-red {
  color: red;
}

.scroll {
  height: 800px;
  overflow-y: scroll;
}
.align-center {
  display: flex;
  align-items: center;
}
</style>